<template>
    <div class="top">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="top-nav">
            <el-breadcrumb-item :to="{ path: '/home/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>日志管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增日志</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card" style="margin-top:20px">
            <div slot="header" class="clearfix">
                <span>
                    <i class="el-icon-menu"></i> 操作面板
                </span>
            </div>
            <!-- 表单部分 -->
            <el-row>
                <el-col :span="10">
                    <!-- 
                        属性解释:   
                            model:存放表单数据的对象
                            rules:表单校验规则
                            ref:对表单进行重置操作
                    -->
                    <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
                        <!-- 商家头像上传 -->
                        <el-form-item label="日志图片" prop="d_img">
                            <!-- 
                                文件上传组件
                                action:上传文件服务器地址
                            -->
                            <el-upload class="avatar-uploader" action="http://47.92.27.111:9000/upload" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <el-image v-if="ruleForm.d_img" :src="ruleForm.d_img" class="avatar" fit="cover"></el-image>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <!-- 商家信息 -->
                        <el-form-item label="伴宠人员" prop="d_man_name">
                            <el-input type="text" placeholder="请输入伴宠人员" v-model="ruleForm.d_man_name" />
                        </el-form-item>
                        <el-form-item label="发布城市" prop="d_city">
                            <el-input type="text" placeholder="请输入发布城市" v-model="ruleForm.d_city"></el-input>
                        </el-form-item>
                        <el-form-item label="发布时间" prop="d_time">
                            <el-col :span="24">
                                <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.d_time"
                                    style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="发布内容" prop="d_detail">
                            <el-input type="textarea" :rows="2" placeholder="请输入发布内容" v-model="ruleForm.d_detail" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" icon="el-icon-check">发布</el-button>
                            <el-button type="warning" @click="resetForm('ruleForm')" icon="el-icon-refresh">重置</el-button>
                            <el-button type="info" @click="back" icon="el-icon-back">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checkList: ["选中且禁用", "复选框 A"],
            // 存放表单数据
            ruleForm: {
                d_img: "",
                d_city: "",
                d_time: "",
                d_man_name: "",
                d_detail: ""
            },
            // 校验规则
            rules: {
                d_img: [
                    {
                        required: true,
                        message: "请上传伴宠日志图片",
                        trigger: "change"
                    }
                ],
                d_man_name: [
                    {
                        required: true,
                        message: "请输入伴宠人员",
                        trigger: "blur"
                    }
                ],
                d_city: [
                    {
                        required: true,
                        message: "请输入发布城市",
                        trigger: "blur"
                    }
                ],
                d_detail: [
                    {
                        required: true,
                        message: "请输入发布内容",
                        trigger: "blur"
                    }
                ],
                d_time: [
                    {
                        required: true,
                        message: "请选择发布时间",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log("1111", res);
            // this.imageUrl = URL.createObjectURL(file.raw);
            this.ruleForm.d_img = res.data;
            console.log("图片地址:", this.ruleForm.d_img);
        },
        beforeAvatarUpload(file) {
            const isJPG =
                file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 或者 PNG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        // 提交表单
        submitForm(formName) {
            // 校验表单
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 处理日期
                    this.ruleForm.d_time = this.$moment(this.ruleForm.d_time).format("YYYY-MM-DD hh:mm:ss")
                    // 这是表单校验通过
                    this.$axios
                        .post(this.$api.diaryAdd, this.ruleForm)
                        .then(res => {
                            // token过期校验
                            if (res?.code == 202) {
                                this.$message.error(res?.msg);
                                this.$router.replace("/login");
                            }
                            if (res?.data?.code == 200) {
                                // 添加成功
                                this.$message.success(res?.data?.msg);
                                this.resetForm("ruleForm");
                            } else {
                                this.$message.error(res?.data?.msg);
                            }
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                }
            });
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 返回
        back() {
            this.$router.back();
        }
    }
};
</script>

<style>
.text {
    font-size: 14px;
}

/* .item {
    margin-bottom: 18px;
} */

/* .clearfix:before, */
/* .clearfix:after {
    display: table;
    content: "";
} */

/* .clearfix:after {
    clear: both;
} */

.box-card {
    width: 100%;
}

/* .top {
    padding: 15px;
}

.top-nav {
    padding: 10px 0 20px;
} */

.avatar-uploader .el-upload {
    border: 1px dashed #615e5e;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #378be0;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>